<template>
	<view class="content">
		<u-loading-page :loading="loading" loading-text="正在刷新登录状态" ></u-loading-page>
		<u-popup :show="show_pm_qrcode" mode="center" @close="hide_pm()" round="10">
			<view style="padding: 5px;">
				<u-image src="/static/qrcode/pm.jpg" width="80vw" height="80vh"></u-image>
			</view>
		</u-popup>
		<u-popup :show="show_sub_qrcode" mode="center" @close="hide_sub()" round="10"><!-- 公众号 -->
			<view style="padding: 5px;">
				<u-image src="/static/qrcode/pubsub.jpg" width="80vw" height="80vh"></u-image>
			</view>
		</u-popup>
		<view class="avatar_pannel">
			<u-row width="100vw">
				<u-col span="5">
					<u-image width="200rpx" height="200rpx" radius="15px" :src="avatar_url" />
				</u-col>
				<u-col span="7">
					<text class="nickname_text"> {{nickname}} </text><br>
					<text class="username_text"> {{username}} </text>
				</u-col>
			</u-row>
		</view>
		<view class="self_message">
			<u-grid col="5" custom-style="witdh: 30vw;">
				<u-grid-item />
				<u-grid-item @click="to_comment()">
					<u-image width="80rpx" height="80rpx" src="/static/icons/me/comment.png"/>
					<text class="message_title">评论</text>
				</u-grid-item>
				<u-grid-item @click="to_tb()">
					<u-image width="80rpx" height="80rpx" src="/static/icons/me/course-tables.png"/>
					<text class="message_title">课表</text>
				</u-grid-item>
				<u-grid-item @click="show_sub()">
					<u-image width="80rpx" height="80rpx" src="/static/icons/me/WOA.png"/>
					<text class="message_title">公众号</text>
				</u-grid-item>
				<u-grid-item />
			</u-grid>
		</view>
		<view class="self_helper">
			<zd-cell image_src="/static/icons/me/user-menu.png" message="账号管理" @cellClicked="to_setting()"/>
			<zd-cell image_src="/static/icons/me/my-post.png" message="我的帖子" @cellClicked="to_my_post()"/>
			<zd-cell image_src="/static/tabel_bar_icons/map_select.png" message="校园地图" @cellClicked="to_map()"/>
			<zd-cell image_src="/static/tabel_bar_icons/find_select.png" message="发现" @cellClicked="to_find()"/>
			<zd-cell image_src="/static/icons/me/customer-service.png" message="客服" @cellClicked="show_pm()"/>
			<zd-cell image_src="/static/icons/me/more.png" message="切换学校" @cellClicked="switch_school()"></zd-cell>
			<!-- <zd-cell image_src="" message="设置" /> -->
		</view>
	</view>
</template>

<script>
	export default {
		onShareAppMessage() {
			return {
				title: "首页",
				path: "/pages/index/index"
			}
		},
		data() {
			return {
				animation: "width:60px;height:25px;",
				hide_text: "",
				pannel_status: false,
				pannel_display: "display: none",
				loading: false,
				nickname: getApp().globalData.local_user.nickname,
				username: getApp().globalData.local_user.username,
				avatar_url: getApp().globalData.local_user.avatar_url,
				show_pm_qrcode: false,
				show_sub_qrcode: false
			};
		},
		onShow() {
			let access_token = getApp().globalData.access_token;
			if (!access_token) {
				// #ifdef APP-PLUS
				uni.showModal({
					title: "登录状态错误",
					content: "您的登录已过期或未登录",
					confirmText: "登录",
					cancelText: "稍后",
					success(res) {
						if(res.confirm) {
							uni.navigateTo({
								url: "/pages/me/login_page/login_page"
							})
						}
					}
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.showModal({
					title: "登录状态错误",
					content: "您的登录已过期或未登录",
					confirmText: "刷新",
					cancelText: "稍后",
					success: (res) => {
						if(res.confirm) {
							this.loading = true
							this.relogin()
							setTimeout(() => {
								this.loading = false
								uni.reLaunch({
									url: "/pages/me/me"
								})
							}, 500)
						}
					}
				})
				// #endif
			} else {
				getApp().globalData.refreshLoginStatus().then(data => {
					this.nickname = getApp().globalData.local_user.nickname
					this.username = getApp().globalData.local_user.username
					this.avatar_url = getApp().globalData.local_user.avatar_url
				})
			}
		},
		methods: {
			to_map() {
				uni.navigateTo({
					url: "/pages/map/map"
				})
			},
			switch_school() {
				uni.navigateTo({
					url: "/self-content/pages/switch_school/switch_school"
				})
			},
			to_find() {
				uni.navigateTo({
					url: "/pages/useful_models/useful_models"
				})
			},
			to_tb() {
				uni.navigateTo({
					url:"/self-content/pages/timetable/timetable"
				})
			},
			to_setting() {
				uni.navigateTo({
					url: "/self-content/pages/self_setting/self_setting"
				})
			},
			to_my_post() {
				uni.navigateTo({
					url: "/self-content/pages/my-post/my-post"
				})
			},
			play() {
				if (this.pannel_status == false ) {
					this.animation = "animation:show_login_pannel 0.25s;width:600rpx;height:400rpx;infinite"
					this.hide_text = "display: none"
					this.pannel_display = ""
					console.log("1")
				} else {
					this.animation = "animation:show_login_pannel_r 0.25s;width:60px;height:25px;"
					this.hide_text = ""
					this.pannel_display = "display: none"
					console.log("2")
				}
				this.pannel_status =! this.pannel_status
			},
			relogin() {
				uni.login({
					provider: "weixin",
					onlyAuthorize: true,
					success: (event) => {
						let code = event.code
						uni.request({
							url: getApp().globalData.base_url + "/login_with_wx",
							method: "POST",
							data: {"code": code},
						}).then(data => {
							data = data.data
							getApp().globalData.access_token = data.token
						})
					}
				})
			},
			to_comment() {
				uni.navigateTo({
					url:"/self-content/pages/comment/comment"
				})
			},
			show_pm() {
				// console.log("hello")
				this.show_pm_qrcode = true
			},
			hide_pm() {
				this.show_pm_qrcode = false
			},
			show_sub() {
				// console.log("hello")
				this.show_sub_qrcode = true
			},
			hide_sub() {
				this.show_sub_qrcode = false
			}
		}
}
</script>

<style lang="scss">
	.content {
		// padding: 20px;
	}
	.avatar_pannel {
		padding: 20px;
	}
	.username_text {
		font-size: 10px;
		font-weight: 900;
	}
	.nickname_text {
		font-size: 20px;
		font-weight: 800;
	}
	.self_message {
		padding-top: 20px;
	}
	.message_title {
		font-size: 14px;
	}
	.self_helper {
		padding: 4px;
		padding-top: 20px;
	}
</style>
